<template>
  <div class="sys-login">
    <div class="login-body">
      <div class="login-wrap">
        <div class="form-area">
          <div class="login_box">
            <h2>欢迎使用！</h2>
            <h2>{{ $baseInfo.BASE_TITLE }}</h2>
            <!-- <div class="line" /> -->
            <div class="box_from">
              <!-- <div style="font-size: 20px; font-weight: bold">登录</div> -->
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                class="demo-ruleForm"
              >
                <el-form-item prop="userName" style="">
                  <div class="input-item">
                    <!-- <i class="el-icon-user" style="font-size: 25px;color:#999999" /> -->
                    <el-input
                      v-model="ruleForm.userName"
                      prefix-icon="el-icon-user"
                      placeholder="请输入您的工号"
                      class="input"
                    />
                  </div>
                </el-form-item>
                <el-form-item prop="password" style="">
                  <div class="input-item" style="padding-top: 10px">
                    <!-- <i class="el-icon-lock" style="font-size: 25px;color:#999999" /> -->
                    <el-input
                      v-model="ruleForm.password"
                      prefix-icon="el-icon-lock"
                      placeholder="请输入您的密码"
                      class="input"
                      show-password
                    />
                  </div>
                </el-form-item>
              </el-form>
              <div style="margin-top: 60px">
                <el-button
                  class="buttonStyle"
                  :loading="loading"
                  @click="submitForm('ruleForm')"
                >登录</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="img-area">
          <div class="left-img">
            <img src="../../assets/image/bg-wrapper.png" class="bg-wrapper">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setNewToken, setPermissions } from '../../utils/publicFun'
import {
  pcLogin,
  getMenuByRole
  // getMenuByRoleId,
  // getPermByRoleId
} from '../../utils/apis/login'
export default {
  name: 'Login',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formPassword.confirmpwd !== '') {
          this.$refs.formPassword.validateField('confirmpwd')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formPassword.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      formPassword: {
        password: '',
        confirmpwd: ''
      },
      pass: {
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmpwd: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      loginFirst: null,
      userId: '',
      roleId: ''
    }
  },
  created() {
    document.title = this.$baseInfo.BASE_TITLE
    window.addEventListener('keydown', this.keyDown, false)
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  },
  methods: {
    keyDown(e) {
      if (e.keyCode === 13) {
        this.submitForm('ruleForm')
      }
    },
    dstroyed() {
      window.removeEventListener('keydown', this.keyDown, false)
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async(valid) => {
        if (valid) {
          this.loading = true
          const params = {
            card: this.ruleForm.userName,
            password: this.ruleForm.password
          }
          try {
            const { data } = await pcLogin(params)
            if (data.code == 200) {
              const userInfo = {
                realName: data.data.name
              }
              localStorage.setItem('userInfo', JSON.stringify(userInfo))
              setNewToken(data.data.token, 3600)
              this._getMenuByRoleId()
              this.loading = false
              this.$router.push('/index')
              this.$message.success('登录成功！')
            } else {
              this.$message.error(data.msg)
            }
            this.loading = false
          } catch (e) {
            // this.$message.error('登录失败！')
            this.loading = false
          }
        } else {
          return false
        }
      })
    },
    async _getMenuByRoleId() {
      // const params = {
      //   roleId
      // }
      try {
        const { data } = await getMenuByRole()
        if (data.code === 200) {
          localStorage.setItem('menuList', JSON.stringify(data.data))
        } else {
          console.log(data)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async _getPermByRoleId(roleId) {
      const params = {
        roleId
      }
      try {
        const { data } = await getPermByRoleId(params)
        if (data.code === 200) {
          setPermissions(data.data)
        } else {
          console.log(data)
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.sys-login {
  display: flex;
  height: 100vh;
  overflow: auto;
  min-width: 1200px;
  flex-direction: column;
  .login-header {
    display: flex;
    align-items: center;
    padding: 10px 80px;
  }
  .login-footer {
    height: 40px;
    padding: 10px;
  }
  .logo {
    font-size: 32px;
    font-weight: bold;
  }
  .logo-img {
    border-right: 1px solid #999;
    padding-right: 30px;
    margin-right: 30px;
    img {
      height: 60px;
    }
  }
  .login-body {
    flex-grow: 1;
    background: url("../../assets/image/background.png") no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-wrap {
      width: 64%;
      min-width: 1270px;
      height: 720px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 20px -3px 50px 20px rgba(42, 40, 219, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      .img-area {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .form-area {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #388af5;
      }
      .left-img {
        width: 500px;
        height: 500px;
        .bg-wrapper {
          height: 100%;
          width: 100%;
        }
        // background: url("../../assets/image/bg-wrapper.png") no-repeat;
        // background-size: 100% 100%;
        // background-position: center center;
      }
      .login_box {
        width: 400px;
        height: 500px;
        // background-color: #fff;
        // margin-right: 160px;
        border-radius: 10px;
        // box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
        h2 {
          padding-left: 24px;
          color: #fff;
          font-size: 44px;
          // margin-top: 60px;
          // text-align: center;
        }
        h2:last-of-type {
          font-size: 36px;
        }
        .line {
          margin: 24px 0 0 24px;
          width: 60px;
          height: 4px;
          background-color: #fff;
        }
        .box_from {
          padding: 20px 24px 0 24px;
          .demo-ruleForm {
            margin-top: 50px;
            .input-item {
              // border-bottom: 1px solid #d3dfef;
              display: flex;
              align-items: center;
              width: 100%;
              .input {
                flex-grow: 1;
                font-size: 13px;
                width: 200px;
              }
              /deep/.el-input__inner {
                border: none;
              }
            }
          }
          /deep/.buttonStyle {
            height: 48px;
            border-radius: 30px;
            width: 160px;
            text-align: center;
            color: #fff;
            background: #ffc835;
            border: none;
            span {
              font-size: 24px !important;
            }
          }
        }
      }
    }
  }
  .login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/deep/ .el-form-item__error {
  color: #ffc835;
}
/deep/ .el-input__inner {
  border-radius: 22px;
}
</style>
